<template>
	<view :class="config.style">
		<view class="search">
			<view class="uni-form-item uni-column">
				<uni-icons type="search" size="18" class="search-icon"></uni-icons>
				<input class="uni-input search-input" confirm-type="search" placeholder="搜索商品" @input="getKeyword" @confirm="startSearch"/>
			</view>
		</view>
		
		<!--搜索历史 容器-->
		<view class="history-list-section">
			<view class="title">搜索历史</view>
			<view class="lists">
				<view class="item" v-for="(item, index) in history" :key="index" @click="clickSearch(item.keyword)">
					{{item.keyword}}
				</view>
			</view>
			
			<view class="title">热门搜索</view>
			<view class="lists">
				<view class="item" v-for="(item, index) in hot" :key="index" @click="clickSearch(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				loading: true, //加载中
				config: {}, //全局配置数据
				keyword : '', //搜索关键字
				history : [], //搜索历史列表
				hot: [], //搜索推荐关键字
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			await this.$onLaunched;
			//获取url参数
			this.urlParams = option
		},
		created() {
			this.getHistoryList()
			this.getHotList()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			
			/**
			 * 获取关键字
			 * @param {Object} e
			 */
			getKeyword(e){
				console.log(e)
				this.keyword = e.detail.value
				if(this.keyword == ""){
					this.searchLoading = true
				}
			},
			
			/**
			 * 历史记录搜索
			 * @param {Object} e
			 */
			clickSearch(keyword) {
				this.keyword = keyword
				this.startSearch()
			},

			/**
			 * 执行搜索
			 * @param {Object} e
			 */
			startSearch: function(e){
				console.log(e)
				let keyword = this.keyword
				this.addKeyword(keyword)
				let url = '../goods/lists?keyword=' + keyword
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 获取关键字
			 * @param {Object} e
			 */
			getKeyword(e){
				console.log(e)
				this.keyword = e.detail.value
				if(this.keyword == ""){
					this.searchLoading = true
				}
			},
			
			/**
			 * 搜索推荐关键字列表
			 */
			getHotList() {
				let _this = this
				let data = {}
					data.action = 'hot'
					data.m = 'muu_minishop'
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success(res) {
						if (res.data.code == 200) {
							_this.hot = res.data.data
							console.log(_this.hot)
						}
					}
				})
			},
			
			/**
			 * 搜索历史列表
			 */
			getHistoryList() {
				let _this = this
				let data = {}
					data.action = 'history'
					data.m = 'muu_minishop'
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success(res) {
						if (res.data.code == 200) {
							_this.history = res.data.data
							console.log(_this.history)
						}
					}
				})
			},
			
			/**
			 * 写入历史搜索记录
			 * @param {Object} keyword
			 */
			addKeyword(keyword){
				let that = this
				
				let data = {}
					data.action = 'add'
					data.m = 'muu_minishop'
					data.keyword = this.keyword
					
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/search'
					//#endif
					//#ifdef H5
					url = 'entry/site/search'
					//#endif
				
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success(res) {
							if (res.data.code == 200) {
								
							}
							resolve(res.data)
						},
						fail() {
							reject(res)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.search {
		position: relative;
		padding: 10rpx 20rpx;
		.search-input {
			border: 2rpx solid #fff;
			background-color: #f2f2f2;
			border-radius: 30rpx;
			padding: 12rpx 12rpx 12rpx 60rpx;
			font-size: 28rpx;
		}
		.search-icon {
			position: absolute;
			left: 36rpx;
			top: 24rpx;
			color: #000;
		}
	}
	.history-list-section {
		padding: 20rpx;
		.title {
			font-size: 28rpx;
			color: #999;
			
		}
		.lists {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			.item {
				display: inline-block;
				padding: 10rpx 16rpx;
				margin: 10rpx;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
